<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
</head>
<body>
<div id="app">
    <!-- 2.添加路由链接
				router-link: vue会将标签解析为a标签
				to: vue会解析为href属性
			 -->
    <router-link to="/user">用户</router-link>
    <router-link to="/dept">部门</router-link>
    <!-- 3.定义路由占位符 当用户点击路由时,在该位置展现页面
				理解为新的div.
				即指定页面展现在哪里
			  -->
    <router-view></router-view>
</div>
<!-- 1.引入js -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    /* 4.定义组件变量 */
    const user = {
        template: '<h1>我是user</h1>'
    }
    const dept = {
        template: '<h1>我是dept</h1>'
    }
    /* 5.配置路由规则  */
    const router = new VueRouter({
        //数组
        routes: [
            //对象
            //key:value形式
            //俩参数，path与component
            //path：请求路径；component：指定要跳的组件
            //redirect重定向，使浏览器默认跳转到某个页面
            //写法：path:'/',redirect:'/xx'
            {path:'/',redirect:'/dept'},
            {path:'/user',component:user},
            {path:'/dept',component:dept}
        ]
    })
    /*6.将路由组件挂载至vue*/
    const app = new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>